<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        
        <link rel="shortcut icon" href="../img/favicon.ico">
        <title>ComboBox - My Docs</title>
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/font-awesome.min.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/github.min.css">

        <script src="../js/jquery-1.10.2.min.js" defer></script>
        <script src="../js/bootstrap.min.js" defer></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
        <script>hljs.initHighlightingOnLoad();</script> 
    </head>

    <body>
        <div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
            <div class="container">
                <a class="navbar-brand" href="..">My Docs</a>
                <!-- Expander button -->
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Expanded navigation -->
                <div id="navbar-collapse" class="navbar-collapse collapse">
                        <!-- Main navigation -->
                        <ul class="nav navbar-nav">
                            <li class="navitem">
                                <a href=".." class="nav-link">Pygame Widgets</a>
                            </li>
                            <li class="navitem">
                                <a href="../animations/" class="nav-link">Animations</a>
                            </li>
                            <li class="navitem">
                                <a href="../button/" class="nav-link">Button</a>
                            </li>
                            <li class="navitem">
                                <a href="../buttonarray/" class="nav-link">ButtonArray</a>
                            </li>
                            <li class="navitem active">
                                <a href="./" class="nav-link">ComboBox</a>
                            </li>
                            <li class="navitem">
                                <a href="../common/" class="nav-link">Common</a>
                            </li>
                            <li class="navitem">
                                <a href="../dropdown/" class="nav-link">Dropdown</a>
                            </li>
                            <li class="navitem">
                                <a href="../progressbar/" class="nav-link">Progress Bar</a>
                            </li>
                            <li class="navitem">
                                <a href="../slider/" class="nav-link">Slider</a>
                            </li>
                            <li class="navitem">
                                <a href="../textbox/" class="nav-link">TextBox</a>
                            </li>
                            <li class="navitem">
                                <a href="../toggle/" class="nav-link">Toggle</a>
                            </li>
                        </ul>

                    <ul class="nav navbar-nav ml-auto">
                        <li class="nav-item">
                            <a href="#" class="nav-link" data-toggle="modal" data-target="#mkdocs_search_modal">
                                <i class="fa fa-search"></i> Search
                            </a>
                        </li>
                            <li class="nav-item">
                                <a rel="prev" href="../buttonarray/" class="nav-link">
                                    <i class="fa fa-arrow-left"></i> Previous
                                </a>
                            </li>
                            <li class="nav-item">
                                <a rel="next" href="../common/" class="nav-link">
                                    Next <i class="fa fa-arrow-right"></i>
                                </a>
                            </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                    <div class="col-md-3"><div class="navbar-light navbar-expand-md bs-sidebar hidden-print affix" role="complementary">
    <div class="navbar-header">
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#toc-collapse" title="Table of Contents">
            <span class="fa fa-angle-down"></span>
        </button>
    </div>

    
    <div id="toc-collapse" class="navbar-collapse collapse card bg-secondary">
        <ul class="nav flex-column">
            
            <li class="nav-item" data-level="1"><a href="#combobox" class="nav-link">ComboBox</a>
              <ul class="nav flex-column">
            <li class="nav-item" data-level="2"><a href="#mandatory-parameters" class="nav-link">Mandatory Parameters</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            <li class="nav-item" data-level="2"><a href="#optional-parameters" class="nav-link">Optional Parameters</a>
              <ul class="nav flex-column">
              </ul>
            </li>
              </ul>
            </li>
        </ul>
    </div>
</div></div>
                    <div class="col-md-9" role="main">

<h1 id="combobox">ComboBox</h1>
<p>A dropdown menu allowing the selection of various elements using a search bar.</p>
<p>It is similar to <code>Dropdown</code> but includes a <code>TextBox</code> that allows searching of options.</p>
<p>The parameters of the <code>TextBox</code> can be made different
from the ones of the dropdown if they are specified in
the <code>textboxKwargs</code> parameter.</p>
<p><img alt="combobox.gif" src="../images/combobox.gif" /></p>
<pre><code class="language-Python">import pygame
from pygame_widgets import ComboBox, Button

pygame.init()
win = pygame.display.set_mode((600, 600))

comboBox = ComboBox(
    win, 120, 10, 250, 50, name='Select Color',
    choices=pygame.colordict.THECOLORS.keys(),
    maxResults=4,
    font=pygame.font.SysFont('calibri', 30),
    borderRadius=3, colour=(0, 200, 50), direction='down',
    textHAlign='left'
)


def output():
    comboBox.textBar.colour = comboBox.getText()


button = Button(
    win, 10, 10, 100, 50, text='Set Color', fontSize=30,
    margin=15, inactiveColour=(200, 0, 100), pressedColour=(0, 255, 0),
    radius=5, onClick=output, font=pygame.font.SysFont('calibri', 18),
    textVAlign='bottom'
)

run = True
while run:
    events = pygame.event.get()
    for event in events:
        if event.type == pygame.QUIT:
            pygame.quit()
            run = False
            quit()

    win.fill((255, 255, 255))

    comboBox.listen(events)
    comboBox.draw()
    button.listen(events)
    button.draw()

    pygame.display.update()
</code></pre>
<p>This is a classic combo box. The current selected text
can be accessed through the <code>getText()</code> methods.</p>
<p>It returns the current text in the search bar.</p>
<h2 id="mandatory-parameters">Mandatory Parameters</h2>
<p><em>Note: Mandatory parameters must be supplied in order.</em></p>
<table>
<thead>
<tr>
<th align="center">Parameter</th>
<th>Description</th>
<th align="center">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">choices</td>
<td>Choices to appear in the list</td>
<td align="center">list of str</td>
</tr>
</tbody>
</table>
<h2 id="optional-parameters">Optional Parameters</h2>
<table>
<thead>
<tr>
<th align="center">Parameter</th>
<th>Description</th>
<th align="center">Type</th>
<th align="center">Default</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">direction</td>
<td>Expansion direction. Can be 'down', 'up', 'left' or 'right'.</td>
<td align="center">str</td>
<td align="center">down</td>
</tr>
<tr>
<td align="center">inactiveColour</td>
<td>Default colour when not pressed or hovered over.</td>
<td align="center">(int, int, int)</td>
<td align="center">(150, 150, 150)</td>
</tr>
<tr>
<td align="center">pressedColour</td>
<td>Colour when pressed.</td>
<td align="center">(int, int, int)</td>
<td align="center">(100, 100, 100)</td>
</tr>
<tr>
<td align="center">hoverColour</td>
<td>Colour when hovered over.</td>
<td align="center">(int, int, int)</td>
<td align="center">(125, 125, 125)</td>
</tr>
<tr>
<td align="center">maxChoices</td>
<td>Maximum number of choices to display</td>
<td align="center">int</td>
<td align="center">len(choices)</td>
</tr>
<tr>
<td align="center">searchAlgo</td>
<td>Algorithm to be used to search through choices.</td>
<td align="center">function(str, list) -&gt; list</td>
<td align="center">ComboBox._defaultSearch</td>
</tr>
<tr>
<td align="center">onSelected</td>
<td>Function to be called when a search choice is selected.</td>
<td align="center">function</td>
<td align="center">None</td>
</tr>
<tr>
<td align="center">onSelectedParams</td>
<td>Parameters to be fed into onSelected function.</td>
<td align="center">(*any)</td>
<td align="center">()</td>
</tr>
<tr>
<td align="center">onStartSearch</td>
<td>Function to be called when a search is started by user (clicking on the search box).</td>
<td align="center">function</td>
<td align="center">None</td>
</tr>
<tr>
<td align="center">onStartSearchParams</td>
<td>Parameters to be fed into onStartSearch function.</td>
<td align="center">(*any)</td>
<td align="center">()</td>
</tr>
<tr>
<td align="center">onStopSearch</td>
<td>Function to be called when a search is stopped (clicking outside the search dropdown, or selecting a choice).</td>
<td align="center">function</td>
<td align="center">None</td>
</tr>
<tr>
<td align="center">onStopSearchParams</td>
<td>Parameters to be fed into onStopSearch function.</td>
<td align="center">(*any)</td>
<td align="center">()</td>
</tr>
<tr>
<td align="center">textColour</td>
<td>Colour of text.</td>
<td align="center">(int, int, int)</td>
<td align="center">(0, 0, 0)</td>
</tr>
<tr>
<td align="center">fontSize</td>
<td>Size of text.</td>
<td align="center">int</td>
<td align="center">20</td>
</tr>
<tr>
<td align="center">font</td>
<td>Font of text.</td>
<td align="center">pygame.font.Font</td>
<td align="center">sans-serif</td>
</tr>
<tr>
<td align="center">textHAlign</td>
<td>Horizontal alignment of text. Can be 'centre', 'left' or 'right'.</td>
<td align="center">str</td>
<td align="center">'centre'</td>
</tr>
<tr>
<td align="center">borderColour</td>
<td>Colour of border.</td>
<td align="center">(int, int, int)</td>
<td align="center">(0, 0, 0)</td>
</tr>
<tr>
<td align="center">borderThickness</td>
<td>Thickness of border.</td>
<td align="center">int</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">borderRadius</td>
<td>Border radius. Set to 0 for no radius.</td>
<td align="center">int</td>
<td align="center">0</td>
</tr>
<tr>
<td align="center">textboxKwargs</td>
<td>Optional different parameters only for the <code>TextBox</code>.</td>
<td align="center">dict</td>
<td align="center">{}</td>
</tr>
</tbody>
</table></div>
            </div>
        </div>

        <footer class="col-md-12">
            <hr>
            <p>Documentation built with <a href="https://www.mkdocs.org/">MkDocs</a>.</p>
        </footer>
        <script>
            var base_url = "..",
                shortcuts = {"help": 191, "next": 78, "previous": 80, "search": 83};
        </script>
        <script src="../js/base.js" defer></script>
        <script src="../search/main.js" defer></script>

        <div class="modal" id="mkdocs_search_modal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="searchModalLabel">Search</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
                <p>From here you can search these documents. Enter your search terms below.</p>
                <form>
                    <div class="form-group">
                        <input type="search" class="form-control" placeholder="Search..." id="mkdocs-search-query" title="Type search term here">
                    </div>
                </form>
                <div id="mkdocs-search-results" data-no-results-text="No results found"></div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div><div class="modal" id="mkdocs_keyboard_modal" tabindex="-1" role="dialog" aria-labelledby="keyboardModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="keyboardModalLabel">Keyboard Shortcuts</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
              <table class="table">
                <thead>
                  <tr>
                    <th style="width: 20%;">Keys</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="help shortcut"><kbd>?</kbd></td>
                    <td>Open this help</td>
                  </tr>
                  <tr>
                    <td class="next shortcut"><kbd>n</kbd></td>
                    <td>Next page</td>
                  </tr>
                  <tr>
                    <td class="prev shortcut"><kbd>p</kbd></td>
                    <td>Previous page</td>
                  </tr>
                  <tr>
                    <td class="search shortcut"><kbd>s</kbd></td>
                    <td>Search</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

    </body>
</html>
